// 多个表单输入的解决办法
// 有多个受控的input元素时，你可以通过给每个元素添加name属性，让函数根据event.target.name的值执行方法。
import React, {Component} from 'react';

class Reservation extends Component {

    constructor(props){
        super(props);
        this.state = {
            isGoing: true,
            numberOfGuests: 0
        }
        this.handleInputChange = this.handleInputChange.bind(this);
    }

    // 这一段官网有问题
    handleInputChange(e){
        const target = e.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        this.setState({
            [name]: value,
        })
        console.log(this.state)
    }

    render(){
        return (
            <div>
                我是Reservation组件：
                <form>
                    <label>
                        Is Going:
                        <input
                            name="isGoing"
                            type="checkbox"
                            checked={this.state.isGoing}
                            onChange={this.handleInputChange}
                        />
                    </label>
                    <label>
                        Number of guests:
                        <input
                            name="numberOfGuests"
                            type="number"
                            value={this.state.numberOfGuests}
                            onChange={this.handleInputChange}
                        />
                    </label>
                </form>
            </div>
        )
    }

}

export default Reservation;